<template>
	<view>
		<view class="form-box-production">
			<view class="pro-item" @click="fnSelect('project')">
				<text class="item-label">项目/基地</text>
				<text class="item-value long" v-if="form.projectBaseName">{{ form.projectBaseName }}</text>
				<text class="item-value-placeholder" v-else="form.projectBaseName">请选择项目/基地</text>
			</view>
			<view class="pro-item" @click="fnSelect('site')"
				v-if="form.projectBaseType !== '基地' && form.projectBaseType !== '高端加固'">
				<text class="item-label">区间/站点</text>
				<text class="item-value" v-if="form.lineSiteSectionName">{{ form.lineSiteSectionName }}</text>
				<text class="item-value-placeholder" v-else>请选择区间/站点</text>
			</view>
			<view class="pro-item">
				<text class="item-label">检查日期</text>
				<view class="item-value" @click="datePopup = true">
					<text>{{ getDate(form.checkDate) }}</text>
					<view class="item-time">
						<u-icon name="arrow-down" size="18"></u-icon>
					</view>
				</view>
			</view>
			<view class="pro-item">
				<text class="item-label" style="width: 400rpx;">发现隐患数量</text>
				<view class="item-value">
					<u--input type='number' input-align="right" @input="inputVal(1)" v-model="form.hiddenDangerNum"
						placeholder="请输入数量" border="none"></u--input>
					<text class="unit">项</text>
				</view>
			</view>
		</view>
		<view class="space-box"></view>


		<!-- 电子版、纸质版tab -->
		<view class="tab-box flexR-FS-C">
			<view class="tab-item" v-for="(item, index) in tabList" :key="index"
				:class="{ 'active': currentTab === index }" @click="switchTab(index)">
				{{ item }}
			</view>
		</view>

		<!-- 电子版 -->
		<template v-if="currentTab == 0">
			<uni-collapse>
				<uni-collapse-item :open="true" title-border="none" :border="false">
					<template v-slot:title>
						<view class="collapseTitle flexR-FS-C">
							<image src="../../../../images/zhixing.png" mode="aspectFit"></image>
							<span>运行执行检查表</span>
						</view>
					</template>

					<view class="form-box-production">
						<view class="item-picture-title">
							<text>检查情况纠正要求：</text>
							<view class="picture-box">
								<u--textarea style="height: 120rpx;" v-model="form.aaaaaaaaaa"
									placeholder="请输入不少于 10 个字的描述" border="bottom" :maxlength="200" :count="true"
									confirmType="done"></u--textarea>
							</view>
						</view>

						<view class="item-picture-title borderBottom">
							<text>检查人：</text>
							<view class="picture-box">
								<view v-for="(item, index) in form.signature1Img" :key="index"
									class="signature-container">
									<image class="signature-img" :src="item" mode="aspectFit"></image>
									<image src="../../../../images/close.png" class="delete-signature"
										@click="deleteSignature(index)">
									</image>
								</view>
							</view>
							<view class="sign-btn sign-btn1" @click="showSignature('signature1Img')">新增签名</view>
						</view>

						<view class="item-picture-title">
							<text>要求回复时间：</text>
							<view class="pro-item flexR-SB-C">
								<view>{{ form.bbbbbbbbbb }}</view>
								<view class="item-value flexR-FS-C" @click="bbbbPopup = true">
									<view>{{ replyTimeOption }}</view>
									<view class="item-time">
										<u-icon name="arrow-down" size="18"></u-icon>
									</view>
								</view>
							</view>
						</view>

						<view class="item-picture-title borderBottom">
							<text>受查单位负责人签字：</text>
							<view class="picture-box">
								<view v-for="(item, index) in form.signature2Img" :key="index"
									class="signature-container">
									<image class="signature-img" :src="item" mode="aspectFit"></image>
								</view>
							</view>
							<view class="sign-btn sign-btn2" @click="showSignature('signature2Img', 'one')">新增签名</view>
						</view>

						<view class="item-picture-title">
							<text>原因及纠正措施：</text>
							<view class="picture-box">
								<u--textarea style="height: 120rpx;" v-model="form.cccccccc"
									placeholder="请输入不少于 10 个字的描述" border="bottom" :maxlength="200" :count="true"
									confirmType="done"></u--textarea>
							</view>
						</view>

						<view class="item-picture-title borderBottom">
							<text>负责人签字：</text>
							<view class="picture-box">
								<view v-for="(item, index) in form.signature2Img" :key="index"
									class="signature-container">
									<image class="signature-img" :src="item" mode="aspectFit"></image>
								</view>
							</view>
							<view class="sign-btn sign-btn3" @click="showSignature('signature3Img', 'one')">新增签名</view>
						</view>

						<view class="item-picture-title">
							<text>实施情况验证：</text>
							<view class="picture-box">
								<u--textarea style="height: 120rpx;" v-model="form.ddddddddd"
									placeholder="请输入不少于 10 个字的描述" border="bottom" :maxlength="200" :count="true"
									confirmType="done"></u--textarea>
							</view>
						</view>
					</view>
				</uni-collapse-item>

				<uni-collapse-item :open="true">
					<template v-slot:title>
						<view class="collapseTitle flexR-FS-C">
							<image src="../../../../images/zhixing.png" mode="aspectFit"></image>
							<span>隐患整改检查表</span>
						</view>
					</template>

					<view class="form-box-production">
						<view class="pro-item">
							<text class="item-label" style="width: 400rpx;">隐患整改数量</text>
							<view class="item-value">
								<u--input type='number' input-align="right" @input="inputVal(2)"
									v-model="form.rectificationNum" placeholder="请输入数量" border="none"></u--input>
								<text class="unit">项</text>
							</view>
						</view>

					</view>
				</uni-collapse-item>
			</uni-collapse>
		</template>

		<!-- 纸质版 -->
		<template v-if="currentTab == 1">
			<view class="form-box-production">
				<view class="item-picture-title">
					<view>运行执行检查表</view>
					<view class="picture-box">
						<u-upload :fileList="checkListImg" @afterRead="uploadImage($event, 'check')"
							@delete="deleteImage($event, 'check')" name="Img" multiple :maxCount="9"
							:previewFullImage="true" accept="image" width="200rpx" height="200rpx"></u-upload>
					</view>
				</view>
			</view>
			<view class="space-box"></view>
			<view class="form-box-production">
				<view class="pro-item">
					<text class="item-label" style="width: 400rpx;">隐患整改数量</text>
					<view class="item-value">
						<u--input type='number' input-align="right" @input="inputVal(2)" v-model="form.rectificationNum"
							placeholder="请输入数量" border="none"></u--input>
						<text class="unit">项</text>
					</view>
				</view>
			</view>
			<view class="space-box"></view>
			<view class="form-box-production">
				<view class="item-picture-title">
					<view>隐患整改回复表</view>
					<view class="picture-box">
						<u-upload :fileList="replyListImg" @afterRead="uploadImage($event, 'reply')"
							@delete="deleteImage($event, 'reply')" name="Img" multiple :maxCount="9"
							:previewFullImage="true" accept="image" width="200rpx" height="200rpx"></u-upload>
					</view>
				</view>
			</view>
			<view class="space-box"></view>
			<view class="form-box-production">
				<view class="pro-item">
					<text class="item-label"> 带队检查负责人 </text>
					<view class="item-value" @click="teamPopup = true">
						<text>{{ form.checkPersonName }}</text>
						<view class="item-time">
							<u-icon name="arrow-down" size="18"></u-icon>
						</view>
					</view>
				</view>
				<view class="item-picture-title">
					<text>带队检查照片</text>
					<view class="picture-box">
						<u-upload :fileList="teamListImg" @afterRead="uploadImage($event, 'team')"
							@delete="deleteImage($event, 'team')" name="Img" multiple :maxCount="9"
							:previewFullImage="true" accept="image" width="200rpx" height="200rpx"></u-upload>
					</view>
				</view>
			</view>
		</template>

		<!-- 选择项弹窗 -->
		<u-datetime-picker @cancel="datePopup = false" @confirm="dateConfirm" :maxDate="new Date().getTime()"
			:show="datePopup" v-model="dateTime" mode="date"></u-datetime-picker>
		<view v-if="teamPopup">
			<u-picker :show="teamPopup" title="带队检查负责人" :columns="[teamData]" keyName="name" @confirm="teamConfirm"
				@cancel="teamPopup = false"></u-picker>
		</view>

		<!-- 签名组件 -->
		<view v-if="signaturePopup" class="signature-popup">
			<my-sign @confirm="signConfirm" />
			<image src="../../../../images/close.png" class="close-signature" @click="closeSignature"></image>
		</view>

		<u-picker :show="bbbbPopup" title="要求回复时间" :columns="[bbbbData]" keyName="name" @confirm="updateReplyDate"
			@cancel="bbbbPopup = false"></u-picker>

		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button @click="submit" :loading="isLoading" class="button-primary">提交</button>
			</view>
		</view>
	</view>
</template>
<script>
	import mixins from "@/utils/mixins.js"
	import {
		imgFun,
		isPositiveInteger
	} from "@/utils/common.js";
	import {
		uploadFile
	} from '@/utils/request'
	import {
		projectBaseSave
	} from "@/api/qualitySafetyManagement/qualitySafetyManagement.js"
	import mySign from '@/subpackage-plasmosafety/components/sign/sign.vue'
	import uniCollapse from "./../../../../components/uni-collapse/components/uni-collapse/uni-collapse.vue";
	export default {
		name: 'production_form',
		mixins: [mixins],
		data() {
			return {
				form: {
					projectBaseName: null,
					projectBaseId: null,
					projectBaseType: '工程维保',
					checkDate: Number(new Date()), //检查时间
					hiddenDangerNum: null, //隐患数量
					rectificationNum: null, //隐患整改数量
					checkPerson: null, //带队检查负责人
					checkDocId: null, //带队检查图片
					runCheckDocId: null, //运行执行检查图片id
					rectificationDocId: null, //隐患整改图片id
					lineId: null, //线路id
					lineSiteSectionId: null,
					lineSiteSectionName: null,
					lineSiteSectionType: null,
					aaaaaaaaaa: "",
					signature1Img: [],
					bbbbbbbbbb: this.getDate(new Date()),
					signature2Img: [],
					cccccccc: "",
					signature3Img: [],
					ddddddddd: "",
				},
				checkListImg: [],
				replyListImg: [],
				teamListImg: [],
				datePopup: false,
				dateTime: Number(new Date()),
				teamPopup: false,
				teamData: [],
				isLoading: false,
				typeObj: {
					'工程维保': 'project_base_type_gcwb',
					'综合大修': 'project_base_type_zhdx',
					'基地': 'project_base_type_jd',
					'高端加固': 'project_base_type_mjs'
				},
				tabList: ['电子版', '纸质版'],
				currentTab: 0,
				signaturePopup: false,
				signTypeData: {},
				replyTimeOption: '即刻',
				bbbbPopup: false,
				bbbbData: [{
						name: '即刻',
						id: 'immediate'
					},
					{
						name: '三天内',
						id: 'threeDays'
					}
				],
			}
		},
		components: {
			mySign,uniCollapse
		},
		mounted() {
			this.dateTime = this.getDate(this.dateTime)
			this.teamData = this.$store.getters.dictMap['lead_the_inspection_team']
			// console.log(this.teamData)
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
			},
			fnSelect(type) {
				if (type === 'project') {
					console.log(this.form.projectBaseType, 'this.form.projectBaseType')
					uni.navigateTo({
						url: `/subpackage-plasmosafety/pages/qualitySafetyManagement/components/projectOrStation?projectOrBaseType=${this.form.projectBaseType}`,
						events: {
							setData: (data) => {
								console.log(data.data, '项目/基地');
								let result = data.data
								this.$set(this.form, 'projectBaseName', result.name)
								this.$set(this.form, 'projectBaseType', result.type)
								this.$set(this.form, 'projectBaseId', result.id)
								this.form.lineSiteSectionName = null
							}
						},
					})
				} else {
					if (!this.form.projectBaseName) {
						return uni.showToast({
							title: '请先选择项目/基地',
							icon: 'none',
							mask: true
						})
					}
					let objType = this.form.projectBaseType === '工程维保' ? 'gcwb' : 'zhdx'
					uni.navigateTo({
						url: `/subpackage-plasmosafety/pages/qualitySafetyManagement/components/intervalOrSite?objId=${this.form.projectBaseId}&objType=${objType}`,
						events: {
							setIntervalData: (data) => {
								console.log(data.data, '区间站点');
								let result = data.data
								this.$set(this.form, 'lineId', result.lineId)
								this.$set(this.form, 'lineSiteSectionId', result.lineSiteSectionId || null)
								this.$set(this.form, 'lineSiteSectionName', result.lineSiteSectionName)
								this.$set(this.form, 'lineSiteSectionType', result.lineSiteSectionType)
							}
						},
					})
				}

			},
			async uploadImage(event, type) {
				console.log(event, '00');
				for (var item in event.file) {
					if (type === 'check') {
						this[`checkList${event.name}`].push({
							...event.file[item],
							status: 'success',
							message: ''
						})
					} else if (type === 'reply') {
						this[`replyList${event.name}`].push({
							...event.file[item],
							status: 'success',
							message: ''
						})
					} else if (type === 'team') {
						this[`teamList${event.name}`].push({
							...event.file[item],
							status: 'success',
							message: ''
						})
					} else {
						throw new Error('上传图片类型错误！')
					}

				}
			},
			deleteImage(event, type) {
				if (type === 'check') {
					this[`checkList${event.name}`].splice(event.index, 1)
				} else if (type === 'reply') {
					this[`replyList${event.name}`].splice(event.index, 1)
				} else if (type === 'team') {
					this[`teamList${event.name}`].splice(event.index, 1)
				} else {
					throw new Error('删除图片类型错误！')
				}

			},
			dateConfirm(val) {
				this.form.checkDate = this.getDate(val.value)
				console.log(this.form.checkDate);
				this.datePopup = false
			},
			teamConfirm(val) {
				console.log(val)
				this.form.checkPersonName = val.value[0].name
				this.form.checkPerson = val.value[0].code
				this.teamPopup = false
			},
			inputVal(num) {
				if (num === 1) {
					if (this.form.hiddenDangerNum != 0) {
						this.form.hiddenDangerNum = this.form.hiddenDangerNum.replace(/^(0+)|[^\d]+/g, '')
					}
				} else {
					if (this.form.rectificationNum != 0) {
						this.form.rectificationNum = this.form.rectificationNum.replace(/^(0+)|[^\d]+/g, '')
					}
				}

			},
			validateRequired() {
				if (!this.form.projectBaseName) {
					uni.showToast({
						title: '请选择项目/基地',
						icon: 'none',
						mask: true
					})
					return false
				}

				if (this.form.projectBaseType !== '基地' && this.form.projectBaseType !== '高端加固') {
					if (!this.form.lineSiteSectionName) {
						uni.showToast({
							title: '请选择区间/站点',
							icon: 'none',
							mask: true
						})
						return false
					}
				}

				if (!this.form.checkDate) {
					uni.showToast({
						title: '请选择检查日期',
						icon: 'none',
						mask: true
					})
					return false
				}
				if (this.form.hiddenDangerNum === null) {
					uni.showToast({
						title: '请填写发现隐患数量',
						icon: 'none',
						mask: true
					})
					return false
				}

				if (this.form.rectificationNum === null) {
					uni.showToast({
						title: '请填写隐患整改数量',
						icon: 'none',
						mask: true
					})
					return false
				}

				if (!this.form.checkPerson) {
					uni.showToast({
						title: '请选择带队检查负责人',
						icon: 'none',
						mask: true
					})
					return false
				}
				if (this.teamListImg.length === 0) {
					uni.showToast({
						title: '请上传带队检查照片',
						icon: 'none',
						mask: true
					})
					return false
				}
				return true
			},
			// clearForm() {
			// 	this.form.projectBaseName = null

			// },

			// 打开签名组件
			showSignature(imgParam, type = "multiple") {
				this.signTypeData = {
					imgParam,
					type
				}
				this.signaturePopup = true;
			},
			// 签名确认
			signConfirm(img) {
				const imgParam = this.signTypeData.imgParam

				if (this.signTypeData.type === 'one') {
					this.form[imgParam] = [img]
				} else {
					this.form[imgParam].push(img)
				}

				this.signaturePopup = false
			},

			async submit() {
				if (!this.validateRequired()) return
				if (this.isLoading) return
				this.isLoading = true
				//运行执行检查表
				let fileList1 = [...this.checkListImg]
				for (let item of fileList1) {
					let formData = {}
					if (this.form.runCheckDocId) {
						formData.docId = this.form.runCheckDocId
					}
					let data = await uploadFile({
						url: "rest/doc/uploadDoc",
						formData,
						filePath: item.url
					})
					let res = JSON.parse(data)
					if (!res.success) {
						this.isLoading = false
						return
					}
					this.form.runCheckDocId = res.result.id
				}

				//隐患整改回复表
				let fileList2 = [...this.replyListImg]
				for (let item of fileList2) {
					let formData = {}
					if (this.form.rectificationDocId) {
						formData.docId = this.form.rectificationDocId
					}
					let data = await uploadFile({
						url: "rest/doc/uploadDoc",
						formData,
						filePath: item.url
					})
					let res = JSON.parse(data)
					if (!res.success) {
						this.isLoading = false
						return
					}
					this.form.rectificationDocId = res.result.id
				}

				//带队检查照片
				let fileList3 = [...this.teamListImg]
				for (let item of fileList3) {
					let formData = {}
					if (this.form.checkDocId) {
						formData.docId = this.form.checkDocId
					}
					let data = await uploadFile({
						url: "rest/doc/uploadDoc",
						formData,
						filePath: item.url
					})
					let res = JSON.parse(data)
					if (!res.success) {
						this.isLoading = false
						return
					}
					this.form.checkDocId = res.result.id
				}
				this.form.hiddenDangerNum = this.form.hiddenDangerNum === '' ? 0 : this.form.hiddenDangerNum
				this.form.rectificationNum = this.form.rectificationNum === '' ? 0 : this.form.rectificationNum
				console.log(this.form.projectBaseType, '是啥');

				this.form.projectBaseType = this.typeObj[this.form.projectBaseType]
				// console.log({...this.form},'入参');
				// return
				let res = await projectBaseSave({
					...this.form
				})
				if (res.success) {
					uni.showToast({
						title: res.message,
						icon: 'none',
						mask: true,
					})
					this.form = {},
						this.dateTime = Number(new Date())
					this.checkListImg = []
					this.replyListImg = []
					this.teamListImg = []
					this.form.checkDate = Number(new Date())
					this.form.projectBaseType = '工程维保'
					this.isLoading = false
				} else {
					this.isLoading = false
				}
			},
			closeSignature() {
				this.signaturePopup = false;
			},
			deleteSignature(index) {
				this.form.signature1Img.splice(index, 1);
			},
			updateReplyDate(val) {
				if (val.value[0].id === 'immediate') {
					this.form.bbbbbbbbbb = this.getDate(new Date());
				} else if (val.value[0].id === 'threeDays') {
					const date = new Date();
					date.setDate(date.getDate() + 3);
					this.form.bbbbbbbbbb = this.getDate(date);
				}
				this.replyTimeOption = val.value[0].name
				this.bbbbPopup = false
			},
		}
	}
</script>
<style lang="scss" scoped>
	.form-box-production {
		padding: 0 30rpx;
		background: #fff;

		.pro-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 30rpx 0;
			border-bottom: 2rpx solid #f4f6f9;

			.item-label ::before {
				content: "*";
				color: #FF6A6A;
			}

			.item-label {
				font-size: 32rpx;
			}

			.item-value {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: bold;
				color: #22204E;

				.item-time {
					margin-left: 30rpx;
					// padding-top: 10rpx;
				}

				.unit {
					margin-left: 10rpx;
				}
			}

			.item-value.long {
				display: block;
				max-width: 200px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.item-value-placeholder {
				font-size: 30rpx;
				font-weight: bold;
				color: #c0c4cc;
			}
		}

		.item-picture-title {
			padding: 30rpx 0;

			text,
			view {
				font-size: 32rpx;
			}

			text ::before {
				content: "*";
				color: #FF6A6A;
			}

			.picture-box {
				margin-top: 20rpx;

				.signature-container {
					position: relative;
					display: inline-block;
				}

				.signature-img {
					width: 200rpx;
					height: 100rpx;
				}

				.delete-signature {
					position: absolute;
					top: 0;
					right: 0;
					width: 40rpx;
					height: 40rpx;
					cursor: pointer;
				}
			}

			.sign-btn {
				width: 222rpx;
				height: 68rpx;
				margin: 0 auto;
				color: #FFFFFF;
				border-radius: 10rpx;
				text-align: center;
				line-height: 68rpx;
				font-size: 28rpx;
			}

			.sign-btn1 {
				background-color: #1677FF;
			}

			.sign-btn2 {
				background-color: #FF9F18;
			}

			.sign-btn3 {
				background-color: #04B578;
			}

		}

		.borderBottom {
			padding-bottom: 40rpx;
			border-bottom: 2rpx solid #f4f6f9;
		}
	}

	.space-box {
		background-color: #f5f7fb;
		height: 40rpx;
	}


	.tab-box {
		background-color: #FFFFFF;
		padding: 20rpx;
		border-bottom: 1px dashed #E1E5ED;
		// border-bottom: 1px ;

		.tab-item {
			padding: 15rpx 40rpx;
			margin: 0 10rpx;
			color: #333;
			border-radius: 40rpx;
			font-size: 30rpx;
			transition: all 0.2s;

			&.active {
				background: #0170FE;
				color: #fff;
			}
		}
	}

	.collapseTitle {
		image {
			width: 64rpx;
			height: 64rpx;
			margin: 10rpx 20rpx;
		}

		span {
			font-size: 34rpx;
		}
	}

	/deep/ .uni-input-placeholder {
		// padding-left: 220rpx;
		font-size: 30rpx;
	}

	// /deep/ .uni-input-input{
	// 	text-align: right;
	// }
	.outer-btn {
		height: 100rpx;

		.button {
			height: 92rpx;
			line-height: 92rpx;
			background: #2F80ED;
			color: #FFFFFF;
			text-align: center;
			font-size: 32rpx;
			position: fixed;
			bottom: 0;
			z-index: 10;
		}
	}

	.signature-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;

		.close-signature {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			bottom: 40rpx;
			right: 40rpx;
			color: #333;
			font-size: 32rpx;
		}
	}
</style>

<style>
	.uni-collapse-item {
		margin-top: 20rpx;
	}

	.u-border-bottom {
		border-color: #f4f6f9 !important;
	}
</style>